{extend name="index/index" /}


{block name="main"}
<!-- 内容区域 -->
<div class="tpl-content-wrapper">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <div class="widget am-cf">
                    <div class="widget-head am-cf">
                        <div class="widget-title  am-cf">用户列表</div>
                    </div>
                    <div class="widget-body  am-fr">

                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-6">
                            <div class="am-form-group">
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">
                                        <button type="button" class="am-btn am-btn-default am-btn-success"  data-toggle="modal" data-target="#myModal2" id="add-admin"><span class="am-icon-plus"></span>新增用户</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-6 am-u-lg-3">
                            <div class="am-form-group tpl-table-list-select">
                                <select data-am-selected="{btnSize: 'sm'}">
                                    <option value="option1">所有类别</option>
                                    <option value="option2">禁用用户</option>
                                    <option value="option3">激活用户</option>
                                </select>
                            </div>
                        </div>
                        <div class="am-u-sm-12 am-u-md-12 am-u-lg-3">
                            <div class="am-input-group am-input-group-sm tpl-form-border-form cl-p">
                                <input type="text" class="am-form-field ">
                                <span class="am-input-group-btn">
            <button class="am-btn  am-btn-default am-btn-success tpl-table-list-field am-icon-search" type="button"></button>
          </span>
                            </div>
                        </div>

                        <div class="am-u-sm-12">
                            <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>名称</th>
                                    <th>电话</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                {volist name="data" id="v"}
                                <tbody>
                                <tr class="gradeX">
                                    <td>{$v['id']}</td>
                                    <td>{$v['name']}</td>
                                    <td>{$v['tel']}</td>
                                    <td>
                                    <div class="am-form-group">
                                        <div class="am-u-sm-9">
                                            <div class="tpl-switch">
                                                    <input type="checkbox" class="ios-switch bigswitch tpl-switch-btn statusbtn" name="status" {:$v['status']==1?'checked':'';} data-id="{$v['id']}">
                                                <div class="tpl-switch-btn-view">
                                                    <div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                    </td>
                                    <td>
                                        <div class="tpl-table-black-operation">
                                            <a href="{:url('admin/user/show',['id'=>$v['id']])}">
                                                <i class="am-icon-newspaper-o"></i> 查看详情
                                            </a>
                                            <a href="{:url('admin/user/edit',['id'=>$v['id']])}">
                                                <i class="am-icon-pencil"></i> 编辑
                                            </a>
                                            <a href="{:url('admin/user/delete',['id'=>$v['id']])}" class="tpl-table-black-operation-del">
                                                <i class="am-icon-trash"></i> 删除
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {/volist}


                                <!-- more data -->
                                </tbody>
                            </table>
                        </div>
                        <div class="am-u-lg-12 am-cf">

                            <div class="am-fr">
                                <ul class="am-pagination tpl-pagination">
                                    <li class="am-disabled"><a href="#">«</a></li>
                                    <li class="am-active"><a href="#">1</a></li>
                                    <li><a href="#">2</a></li>
                                    <li><a href="#">3</a></li>
                                    <li><a href="#">4</a></li>
                                    <li><a href="#">5</a></li>
                                    <li><a href="#">»</a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
</div>

<script>
    $('.statusbtn').click(function(){
        var id = $(this).attr('data-id');
        $.ajax({
            type : 'get',
            datatype : 'json',
            url : '/editStatus/'+id,
            success : function (data) {
                alert('成功');
                if($(this).attr('checked')){
                    $(this).removeAttr('checked');
                }else{
                    $(this).attr('checked','1');
                }
            },
            error : function () {
                alert('error');
            }
        });
    });

</script>

</body>
{/block}


{block name="Modals" id="Modals"}
<div style="margin:100px auto;width:860px;" id="Modals-frame">
    <div class="row" style="overflow:hidden;" id="Modals-add" style="display: none;">
        <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
            <div class="widget am-cf">
                <div class="widget-head am-cf">
                    <div class="widget-title am-fl">新增用户</div>
                    <div class="widget-function am-fr">
                        <a href="javascript:;" class="am-icon-cog"></a>
                    </div>
                </div>
                <div class="widget-body am-fr">

                    <form class="am-form tpl-form-border-form tpl-form-border-br" id="Modals-form" action="{:url('admin/User/save')}" method="post">
                        <div class="am-form-group">
                            <label for="user-name" class="am-u-sm-3 am-form-label">昵称 <span
                                    class="tpl-form-line-small-title">Name</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" class="tpl-form-input" id="user-name" placeholder="请输入新增用户昵称"
                                       name="name">
                                <small>可包含数字、字母或下划线。</small>
                            </div>
                        </div>


                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">密码 <span
                                    class="tpl-form-line-small-title">Pass</span></label>
                            <div class="am-u-sm-9">
                                <input type="password" placeholder="请输入密码" name="pass">
                            </div>
                        </div>


                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">确认密码 <span
                                    class="tpl-form-line-small-title">RePass</span></label>
                            <div class="am-u-sm-9">
                                <input type="password" placeholder="请确认密码" name="repass">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label class="am-u-sm-3 am-form-label">手机号 <span
                                    class="tpl-form-line-small-title">Tel</span></label>
                            <div class="am-u-sm-9">
                                <input type="text" placeholder="请输入手机号" name="tel">
                            </div>
                        </div>

                        <div class="am-form-group">
                            <label for="user-intro" class="am-u-sm-3 am-form-label">激活/禁用</label>
                            <div class="am-u-sm-9">
                                <div class="tpl-switch">
                                    <input type="checkbox" class="ios-switch bigswitch tpl-switch-btn" name="status" >
                                    <div class="tpl-switch-btn-view">
                                        <div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="am-form-group">
                            <div class="am-u-sm-9 am-u-sm-push-3">
                                <input type="submit" class="am-btn am-btn-primary tpl-btn-bg-color-success " id="admin-add-submit"}">
                                <!--</button>-->
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $('#add-admin').click(function(){
        $('#Modals').css('display','block');
        $('#Modals-add').css('display','block');
    });
    $('#Modals').click(function () {
        this.style.display = 'none';
    });
    //JS原生阻止事件冒泡
    document.getElementById('Modals-frame').addEventListener('click',function(e){e.stopPropagation()},false);

    $('#ajax').click(function(){
        var info = $('#Modals-from').serialize();
        // alert(info);
        $.ajax({
            type : 'post',
            data : info,
            url : 'admin/user/editStatus/'+$id,
            success : function (data) {
                $('#box').html(data);
            },
            error : function () {
                alert('error');
            }
        });
    });
</script>
{/block}